<!doctype html>
<html lang="en">
  <head>
    ${require('./_head.html') 
      title="RTL (Right-To-Left)" 
      description="Support for right-to-left text in Pico with dir='rtl'"
      canonical="rtl.html"
    }
  </head>

  <body>
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
      ${require('./_sidebar.html') active="rtl-link"}
      
      <div role="document">
        <section id="rtl">
          <hgroup>
            <h1>RTL</h1>
            <h2>Support for right-to-left text in Pico.</h2>
          </hgroup>
          <p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code>&lt;<b>html</b>&gt</code> element.</p>

<pre><code><em>&lt;!doctype html&gt;</em>
&lt;<b>html</b> <i>dir</i>=<u>"rtl"</u> <i>lang</i>=<u>"ar"</u>&gt;
  <em>...</em>
&lt;/<b>html</b>&gt;</code></pre>

          <p>The RTL feature is still experimental and will probably evolve.</p>
        </section>

        ${require('./_footer.html')}
        
      </div>
    </main>
    <script src="js/commons.min.js"></script>
  </body>
</html>
